import React, { useEffect,useState } from 'react'
import { useParams } from 'umi'
import { Card, Form, Input, Select,Table,Image} from 'antd';
import { getMenuById } from "../../../../apis/menu"
const { Option } = Select;
const formRef = React.createRef();
const layout = {
    labelCol: {
      span: 6,
    },
    wrapperCol: {
      span: 16,
    },
  };
export default function details() {
    const params = useParams()
    const [imgSrc, setImgSrc] = useState('')
	const [contacts,setContacts] = useState([])
	const [buzhou,setbuzhou] = useState([])
	const [jieshao,setjieshao] = useState([])
    useEffect(() => {
        getData(params)
    }, [])
    //根据id获取数据
    const getData = async (id) => {
        const res = await getMenuById({ _id: id.id })
        if (res.meta.status == 200) {
            formRef.current.setFieldsValue(res.message[0])
            setImgSrc(res.message[0].vid)
            setContacts(res.message[0].ingredient)
            setbuzhou(res.message[0].method)
            setjieshao(res.message[0].tips)
            console.log(res.message[0]);
        }
    }
    const columns = [
        {
          title: '用料',
          dataIndex: 'name',
          key: 'name',
          render: text => <a>{text}</a>,
        },
        {
          title: '用料',
          dataIndex: 'number',
          key: 'number',
        }
    ]
    const columns1 = [
        {
          title: '描述',
          dataIndex: 'describe',
          key: 'describe',
          render: text => <a>{text}</a>,
        },
        {
          title: '图列',
          dataIndex: 'img',
          key: 'img',
          render: text => <Image style={{width:'80px',height:'60px'}} src={text}></Image>,
        }
    ]
    const columns2 = [
        {
          title: '介绍',
          dataIndex: 'tipname',
          key: 'tipname',
          width:180,
          render: text => <a>{text}</a>,
        },
        {
          title: '内容',
          dataIndex: 'tipdescribe',
          key: 'tipdescribe',
          render: text => <a>{text}</a>,
        }
    ]
    return (
        <Card title="菜品详情" extra={<a>返回</a>} style={{ width: "98.5%" }}>
            <Form {...layout} ref={formRef} name="control-hooks" >
                <Form.Item
                    name="_id"
                    label="菜品编号"
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
                    <Input disabled />
                </Form.Item>
                <Form.Item
                    name="name"
                    label="菜品名称"
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    name="coverpic"
                    label="视频"
                >
                    <video controls style={{width:"600px",height:'300px'}} src={imgSrc}></video>
                </Form.Item>
                <Form.Item
                    name="needtime"
                    label="菜品的时间"
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    name="isFree"
                    label="是否限时免费"
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
                    <Select
                        disabled
                        placeholder="请选择"
                        allowClear
                        style={{ width: 130 }}
                    >
                        <Option value="Y" >是</Option>
                        <Option value="N" >否</Option>
                    </Select>
                </Form.Item>
                <Form.Item
                    name="isHot"
                    label="是否热点商品"
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
                    <Select
                        disabled
                        placeholder="请选择"
                        allowClear
                        style={{ width: 130 }}
                    >
                        <Option value="Y" >是</Option>
                        <Option value="N" >否</Option>
                    </Select>
                </Form.Item>
                <Form.Item
                    name="grade"
                    label="需要厨师等级"
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
                    <Select
                        disabled
                        placeholder="请选择"
                        allowClear
                        style={{ width: 130 }}
                    >
                        <Option value="1">切墩(1级)</Option>
                        <Option value="2">切墩(2级)</Option>
                        <Option value="3">切墩(3级)</Option>
                        <Option value="4">切墩(4级)</Option>
                        <Option value="5">切墩(5级)</Option>
                    </Select>
                </Form.Item>
                <Form.Item
                    name="classtips"
                    label="功效"
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
                     <Input.TextArea />
                </Form.Item>
                <Form.Item
                    label="配料表"
                >
                    <Table pagination={false} rowKey='name' columns={columns} dataSource={contacts} />
                </Form.Item>
                <Form.Item
                    label="烹饪步骤"
                >
                    <Table pagination={false} rowKey='describe' columns={columns1} dataSource={buzhou} />
                </Form.Item>
                <Form.Item
                    label="详情介绍"
                >
                    <Table pagination={false} rowKey='tipname' columns={columns2} dataSource={jieshao} />
                </Form.Item>
            </Form>
        </Card>
    )
}
